<template>
  <div class="w-100 h-1 flex-1">
    <div v-if="showImg" class="w-100 h-100 flex align-center justify-center background-image">
      <img
        style="min-width: 400px; width: 50%; height: auto; display: block"
        :src="deviceImg"
        @click="showPortTab"
      >
    </div>
    <div v-show="!showImg" class="port-box p-20 h-100  overflow-auto">
      <div class="">
        <div v-for="face in newfaceList" :key="face.partId">
          <h3 class="mb-10">{{ face.partFlag.replace('M', 'B') + ' ' + $t('FACE') }}</h3>
          <div
            v-for="(groupRow, groupRowIndex) in face.portList.length / 48"
            :key="groupRow"
            class="flex mb-20"
          >
            <template v-for="(group, groupIndex) in 2">
              <div
                v-if="face.portList.length > groupRowIndex * 48 + groupIndex * 12"
                :key="group"
                class="port-group-item mr-20 w-50 border-box"
              >
                <div v-for="(row, rowIndex) in 2" :key="row" class="flex align-center p-5">
                  <span class="font-mini text-color text-center port-order">
                    {{
                      `${groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + 1}
                  ~ ${groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + 12}`
                    }}
                  </span>
                  <div class="flex flex-1 justify-around">
                    <div v-for="(item, itemIndex) in 12" :key="item" class="port-img">
                      <img
                        :class="
                          portData(
                            face.portList[
                              groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + itemIndex
                            ]
                          )
                            ? 'scaleImg'
                            : ''
                        "
                        :title="
                          face.portList[
                            groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + itemIndex
                          ].portInfo.bizName
                        "
                        :src="
                          getImg(
                            face.portList[
                              groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + itemIndex
                            ]
                          )
                        "
                        @click="
                          portClick(
                            face.portList[
                              groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + itemIndex
                            ]
                          )
                        "
                      >
                      <EidPopover
                        :eid-data="
                          face.portList[
                            groupRowIndex * 48 + groupIndex * 12 + rowIndex * 24 + itemIndex
                          ]
                        "
                      />
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="loadmore" />
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import EidPopover from './EidPopover'
  export default {
    components: { EidPopover },
    mixins: [mixin],
    data() {
      return {}
    },
    methods: {
      portData(portData) {
        if (portData.selected) {
          this.selectedPort = portData
        }
        return (
          portData.selected ||
          (this.selectedPort && this.selectedPort.connPortId === portData.portInfo.portId)
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
  .port-img {
    transition: all 0.3s;
  }
  .scaleImg {
    transform: scale(1.3);
  }
  .port-group-item{
    &:nth-child(2n){
      margin-right:0;
    }
  }
</style>
